<template>
  <!-- // 用ref包裹完后，不用name.value，直接读取name，vue会自动加上.value。 -->
  <h1>{{name}}</h1>
  <h1>{{job.type}}</h1>
  <h1>{{job.salary}}</h1>
  <h1>{{hobby}}</h1>
  <button @click="say">say</button>
</template>

<script>
  import {ref,reactive} from 'vue'
  export default {
    name: 'App',
    setup(){
      // 最后的处理是完全抛弃基本类型，用对象的属性作为基本类型，用reactive包裹对象
      let name = ref("zhangsan")
      let age = ref(18)
      // 会报错，reactive不能包裹基本数据
      // let number = reactive(666)
      // 包裹对象成1个reactive的proxy对象
      // reactive处理对象是深层次的，会遍历每1个层级。
      let job = reactive({
        type:"vue",
        salary:"30k",
      })
      // 用proxy了之后，能检测到数组的改变。
      let hobby = reactive(['学习','看书'])
      function say(){
        name.value ="wangwu"
        age.value = 99
        // 这个时候job是proxy对象，就不用.value了
        job.type="前端工程师"
        job.salary="60k"
        hobby[0]="教书"
        console.log('name', name,age,job)
      }
      return {
        name,
        say,
        job,
      }
    },
  }
</script>
